<template>
  <div class="doc-render-box">
    <div ref="file"></div>
  </div>
</template>

<script>
import {useRoute} from 'vue-router'
import {defineComponent, getCurrentInstance, onMounted, ref} from "vue";

export default defineComponent({
  name: "previewWord",
  setup() {
    let docx = require('docx-preview')
    const router = useRoute();
    const file = ref(null)
    const {appContext} = getCurrentInstance();
    onMounted(() => {
      appContext.config.globalProperties.axios({
        url: `api/downloadWord`,
        method: 'post',

        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("landId", router.query.index);
          oMyForm.append("path", router.query.url);
          return oMyForm;
        }],
        responseType: "blob",
      }).then(({data}) => {
        docx.renderAsync(data, file.value)
      })
    })

    return {
      router,
      file

    }
  }
})
</script>

<style scoped>
.doc-render-box {
  width: 100%;
  padding-top: 10px;
  margin: 0 auto;
  overflow-x: auto;
}
</style>
